<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>获取多选数据</title>
<script type="text/javascript" src="../../../jquery.js"></script>
    <script src="../../../ui/om-core.js"></script>
    <script src="../../../ui/om-validate.js"></script>
    <script src="../../../ui/om-mouse.js"></script>
    <script src="../../../ui/om-draggable.js"></script>
    <script src="../../../ui/om-position.js"></script>
    <script src="../../../ui/om-resizable.js"></script>
    <script type="text/javascript" src="../../../ui/om-grid.js"></script>
    <script src="../../../ui/om-messagetip.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../themes/default/om-all.css" />
    <link rel="stylesheet" href="../../../demos/common/css/demo.css">
    <!-- view_source_begin -->
    <script type="text/javascript">
        $(document).ready(function(){
        	var selectIds = [];
        		$("#grid").omGrid({
            		dataSource: "griddata.do?method=fast",
            		width : 686,
                    height : 332,
                    limit : 10,
                    singleSelect : false,
                    colModel : [ {header : 'ID', name : 'id', width : 50, align : 'center'}, 
                                 {header : '地区', name : 'city', width : 120, align : 'left'}, 
                                 {header : '地址', name : 'address', align : 'left', width : 'autoExpand'},
                                 {header : '起始IP', name : 'start',width:120},
                                 {header : '结束IP', name : 'end',width:120} ],
            		onRowSelect : function(index, data){
            			if($.inArray(data.id, selectIds)== -1)
                   			selectIds.push(data.id);
            		},
            		onRowDeselect : function(index, data){
            			var i = $.inArray(data.id, selectIds);
            			selectIds.splice(i,1);
            		},
            		//还原过去选中的记录
            	    onRefresh : function(nowpage, records){
            			var len = selectIds.length;
            			var indexs = [], index =-1;
            			for(var i=0; i<len; i++){
            			   $.each(records, function(n,item){
            				   if(item.id === selectIds[i]){
            				      	   indexs.push(n);
            				   }
            			   });
            			}
            			
            			$("#grid").omGrid("setSelections", indexs);
            		}
                    
        	   });
        		//显示所有选中的记录ID
        	$("#btn").click(function(){
        		var text="";
        		$.each(selectIds,function(i,item){
        			text = text+ item+"  ";
        		});
        		alert("您选择的记录有："+text);
        	});
        });
    </script>
    <!-- view_source_end -->
</head>
<body>
<!-- view_source_begin -->
<table id="grid"></table>
<br/>
<button id="btn">获取选中的记录ID</button>
<!-- view_source_end -->

    <div id="view-desc">
        <p>omGrid组件数据是异步加载的，每次只加载当前页数据。本示例演示了如何获取不同页面选中的记录数据。</p>
    </div>
</body>
<script type="text/javascript" src="../../../demos/common/js/themeloader.js"></script>
</html>